<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/common/common.jsp"%>
<%@ include file="/WEB-INF/common/taglib.jsp"%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<meta name="description" content="overview & stats" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<script type="text/javascript">
	
		
		//编辑顶部菜单图标
		function editTb(menuId){
			HF.openWin("编辑图标",530,150,"<%=path%>/menu/toEditicon.do?menuId="+menuId);
		}
		
		//删除菜单
		function delMenu(menuId,isParent){
			var message;
			var flag="1";//删除子菜单
			if(isParent){
				message="确定要删除该菜单吗？其下子菜单将一并删除！";
				flag="0";//删除父菜单和其下子菜单
			}else{
				message="确定要删除该菜单吗？";
			}
			HF.confirm("删除数据",message,"确定","取消",function(){
				$("body").mask("Waiting...");
				$.ajax({
					url:"<%=path%>/system/sysMenu/delete.do",
					async:false,
					dataType: 'json',
					type: "post",   //请求方式
				    cache:false,  
					data:{"menuId":menuId,"flag":flag},
					context: document.body,
					success: function(data){
						$("body").unmask();
		        		//HF.alert(" 数据",message,"确定");
		        		//window.location.reload();
						window.location.href="<%=path%>/system/sysMenu/list.do";
					},
					error : function errorCallBack(xhr, type, errorThrown){
						console.log("ajax require error code = " + xhr.status + " type= " + type+"errorThrown="+errorThrown);
						HF.alert("删除数据","系统异常","确定");
						$("body").unmask();
					}
				});
			})
		}
		
		//展开子菜单
		function openClose(menuId,curObj,trIndex){
			var txt = $(curObj).text();
			if(txt=="展开"){
				$(curObj).text("折叠");
				$("#tr"+menuId).after("<tr id='tempTr"+menuId+"'><td colspan='5'>数据载入中</td></tr>");
				if(trIndex%2==0){
					$("#tempTr"+menuId).addClass("main_table_even");
				}
				var url = "<%=path%>/system/sysMenu/sub.do?parentId="+menuId+"&guid="+new Date().getTime();
				$.get(url,function(data){
					if(data.length>0){
						var html = "";
						$.each(data,function(i,item){
							html = "<tr style='height:24px;line-height:24px;' name='subTr"+menuId+"'>";
							html += "<td></td>";
							html += "<td><span style='width:80px;display:inline-block;'></span>";
							if(i==data.length-1)
								html += "<img src='<%=path%>/resources/images/joinbottom.gif' style='vertical-align: middle;'/>";
							else
								html += "<img src='<%=path%>/resources/images/join.gif' style='vertical-align: middle;'/>";
							html += "<span style='width:100px;text-align:left;display:inline-block;'>"+item.menuName+"</span>";
							html += "</td>";
							html += "<td>"+item.menuUrl+"</td>";
							html += "<td class='center'>"+item.menuOrder+"</td>";
							html += "<td><a class='btn btn-sm btn-info' title='编辑'  href='<%=path%>/system/sysMenu/toMerge.do?menuId="+item.menuId+"'><i class='icon-edit'></i></a> <a class='btn btn-sm btn-danger' title='删除' onclick='delMenu(\""+item.menuId+"\",false)'><i class='icon-trash'></i></a></td>";
							html += "</tr>";
							$("#tempTr"+menuId).before(html);
						});
						$("#tempTr"+menuId).remove();
						if(trIndex%2==0){
							$("tr[name='subTr"+menuId+"']").addClass("main_table_even");
						}
					}else{
						$("#tempTr"+menuId+" > td").html("没有相关数据");
					}
				},"json");
			}else{
				$("#tempTr"+menuId).remove();
				$("tr[name='subTr"+menuId+"']").remove();
				$(curObj).text("展开");
			}
		}
	</script>
</head>
<body>
<div class="panel panel-default">
	<div class="panel-heading">菜单配置 </div>  
	<div class="panel-body"> 
		<table id="table_report" class="table table-striped table-bordered table-hover">
			<thead>
				<tr>
					<th class="center"  style="width: 50px;">序号</th>
					<th class='center'>名称</th>
					<th class='center'>资源路径</th>
					<th class='center'>排序</th>
					<th class='center'>操作</th>
				</tr>
			</thead>
			<tbody>
				<c:choose>
					<c:when test="${not empty menuList}">
						<c:forEach items="${menuList}" var="menu" varStatus="vs">
						<tr id="tr${menu.menuId}">
							<td class="center">${vs.index+1}</td>
							<td class='center'><i class="${menu.menuIcon}">&nbsp;</i>${menu.menuName}&nbsp;
								<c:if test="${menu.menuType == '1'}">
									<span class="label label-success arrowed">系统</span>
								</c:if>
								<c:if test="${menu.menuType == '2'}">
									<span class="label label-important arrowed-in">业务</span>
								</c:if>
							</td>
							<td>${menu.menuUrl == '#'? '': menu.menuUrl}</td>
							<td class='center'>${menu.menuOrder }</td>
							<td style="width: 25%;">
								<a class='btn btn-sm btn-warning' onclick="openClose('${menu.menuId }',this,${vs.index })" >展开</a>
								<a class='btn btn-sm btn-purple' title="图标" href="<%=path%>/system/sysMenu/toEditicon.do?menuId=${menu.menuId}"><i class='icon-picture'></i></a>
								<a class='btn btn-sm btn-info' title="编辑"   href="<%=path%>/system/sysMenu/toMerge.do?menuId=${menu.menuId}"><i class='icon-edit'></i></a>
								<a class='btn btn-sm btn-danger' title="删除" onclick="delMenu('${menu.menuId }',true)"><i class='icon-trash'></i></a>
							</td>
						</tr>
						</c:forEach>
					</c:when>
					<c:otherwise>
						<tr>
							<td colspan="100">没有相关数据</td>
						</tr>
					</c:otherwise>
				</c:choose>
			</tbody>
		</table>
	
		<div>
			&nbsp;&nbsp;<a class="btn btn-sm btn-primary" href="<%=path%>/system/sysMenu/toMerge.do">新增</a>
		</div>
	</div>
</div>	
</body>
</html>